<template>
  <div class="container">
    <h1>VECTOR</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      map: null,
    }
  },
  methods: {
    init(options) {
      this.map = options.map;
      this.drawVectorLayer();
    },
    // 绘制矢量切片图层
    drawVectorLayer() {
      this.addVectorSource();
      this.addVectorLayer();
    },

    // 添加矢量切片数据源
    addVectorSource() {
      this.map.addSource("vectorSourceId", {
          type: "vector",
          url: "mapbox://mapbox.mapbox-terrain-v2"
      });
    },

    // 添加矢量切片图层
    addVectorLayer() {
      this.map.addLayer(
        {
          id: "vectorLayerId",
          type: "line",
          source: "vectorSourceId",
          "source-layer": "contour",
          layout: {
                "line-join": "round",
                "line-cap": "round"
            },
            paint: {
                "line-color": "#ff69b4",
                "line-width": 4
            }
        },
      );
    },

  }
}
</script>
<style scoped lang="scss">
.container {
  position: absolute;
  top: 50px;
  left: 10px;
  border: 0.5rem solid #f40;
  width: 300px;
  min-height: 200px;
  color: #fff;
}
</style>